<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="father">
      父盒子
      <div class="son">
        子盒子
        <a href="www.baidu.com">xxx</a>
      </div>
    </div>
    <script>
      //默认的事件流是冒泡的
      const father = document.querySelector(".father");
      const son = document.querySelector(".son");
      const xxx = document.querySelector("a");
      father.addEventListener("click", function (e) {
        alert("father被点击了");
      });
      son.addEventListener("click", function (e) {
        //如果不阻止会弹框二次
        alert("son被点击了");
        //阻止事件冒泡
        // e.stopPropagation();
      });
      xxx.addEventListener("click", function (e) {
        //如果不阻止会弹框三次
        alert("xxx被点击了");
        //阻止事件冒泡
        e.stopPropagation();
        //阻止事件默认行为--跳转刷新
        e.preventDefault();
      });
    </script>
  </body>
</html>
